<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="form.state" placeholder="审批状态" @change="getAdminList">
            <el-option :label="name" :value="k" v-for="(name,k) in baoxiao.state_list" :key="k"></el-option>
          </el-select>
          <el-form-item>
            <el-input v-model="form.title" placeholder="标题"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAdminList">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="baoxiao.list"
        tooltip-effect="dark"
        style="width: 100%;"
      >
        <el-table-column label="项目名称" prop="project_name"></el-table-column>
        <el-table-column label="名称" prop="title"></el-table-column>
        <el-table-column
          align="left"
          header-align="left"
        >
          <template slot="header" slot-scope="scope">
            <el-select v-model="form.type" placeholder="全部类型" @change="getAdminList">
              <el-option :label="item" :value="i" v-for="(item,i) in baoxiao.admin_type_list" :key="i"></el-option>
            </el-select>

          </template>
          <template slot-scope="scope">
            {{scope.row.type}}
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="money"></el-table-column>
        <el-table-column label="创建人" prop="username"></el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-badge is-dot class="item" v-if="!form.state">
              <el-button type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
            </el-badge>
            <el-button type="primary" @click="edit(scope.row)" v-else size="mini">编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id)" size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>

      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="baoxiao.total">
      </el-pagination>

    </el-footer>
  </el-container>

</template>

<script>
  import {delProject} from "@/apilist/Project"
  import {mapActions,mapState} from "vuex"
    export default {
        name: "baoxiaoList",
        data(){
            return {
                form: {
                   state: 0,
                   type: '',
                   page:1,
                   page_size: 10,
                   title: '',
                },
            }
        },
        computed: {
            ...mapState("AdminData",["baoxiao"]),
        },

        methods: {
            ...mapActions("AdminData", ["getBaoXiaoActions"]),
            getAdminList() {
              this.getBaoXiaoActions(this.form)
            },
            //编辑
            edit(row) {
             this.$router.push({
                 path: '/adminDetail',
                 query: {
                     id: row.id,
                     title: row.title
                 }
             })
            },
            del(id) {
                delProject({id: id,type: 'xz'}).then(res => {
                    if(res.state == 'ok'){
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: ()=> {
                               this.getAdminList();
                            }
                        });
                    }
                });
            },
            handleSizeChange(val) {
                this.form.page_size = val
                this.getAdminList()
            },
            handleCurrentChange(val) {
                this.form.page = val
                this.getAdminList()
            },
        }

    }
</script>

<style scoped>
  .item{
    margin-top: 5px;
    /*margin-right:20px ;*/
  }
</style>
